<template>
	<view class="background">
		<view style="width:80%">
			<view>选择身份信息</view>
			<select v-model="insertUserData.identity" @change="handleIdentityChange()">
				<option value="0">学生</option>
				<option value="1">老师</option>
				<option value="2">管理员</option>
			</select>
		</view>

		<!-- 学生 -->
		<view class="first-container" v-show="studentShow">

			<view>姓名</view>
			<input type="text" placeholder="请输入" v-model="insertUserData.name">

			<view>学号</view>
			<input type="text" placeholder="请输入" v-model="insertUserData.workId">

			<view>专业</view>
			<input type="text" placeholder="请输入" v-model="insertUserData.major">

			<view>班级</view>
			<input type="text" placeholder="请输入" v-model="insertUserData.stuClass">


			<view>性别</view>
			<select v-model="insertUserData.sex">
				<option value="男">男</option>
				<option value="女">女</option>
			</select>

			<view>学院</view>
			<select v-model="insertUserData.college">
				<option value="计算机与信息安全">计算机与信息安全</option>
				<option value="电子信息工程">电子信息工程</option>
				<option value="电气工程及其自动化">电气工程及其自动化</option>
				<option value="机电工程">机电工程</option>
			</select>

		</view>

		<!-- 教师 -->
		<view class="first-container" v-show="teacherShow">

			<view>姓名</view>
			<input type="text" placeholder="请输入" v-model="insertUserData.name">

			<view>性别</view>
			<select v-model="insertUserData.sex">
				<option value="男">男</option>
				<option value="女">女</option>
			</select>

			<view>学院</view>
			<select v-model="insertUserData.academy">
				<option value="计算机与信息安全">计算机与信息安全</option>
				<option value="电子信息工程">电子信息工程</option>
				<option value="电气工程及其自动化">电气工程及其自动化</option>
				<option value="机电工程">机电工程</option>
			</select>

			<view>账号</view>
			<input type="text" placeholder="请输入" v-model="insertUserData.username">


			<view>密码</view>
			<input type="text" placeholder="请输入" v-model="insertUserData.password">
		</view>

		<!-- 管理员 -->
		<view class="first-container" v-show="adminShow">

			<view>姓名</view>
			<input type="text" placeholder="请输入" v-model="insertUserData.name">

			<view>性别</view>
			<select v-model="insertUserData.sex">
				<option value="男">男</option>
				<option value="女">女</option>
			</select>

			<view>账号</view>
			<input type="text" placeholder="请输入" v-model="insertUserData.username">

			<view>密码</view>
			<input type="text" placeholder="请输入" v-model="insertUserData.password">



		</view>



		<view style="display: flex;margin-top: 140rpx;">
			<button class="button" @click="insertUserInfo()">确认</button>
		</view>
	</view>
</template>

<script>
	import Own from "../../api/util/index.js"

	export default {
		data() {
			return {
				teacherShow: false,
				adminShow: false,
				studentShow: true,

				insertUserData: {
					identity: "0",
					workId: "",
					college: "",
					major: "",
					stuClass: "",
					office: "",
					academy: "",
					username: "",
					password: "",
					name: "",
					sex: "",
					age: 0

				}
			}

		},
		onLoad() {

		},
		methods: {
			// 监听选择变化，更新状态
			handleIdentityChange() {
				this.studentShow = this.insertUserData.identity === "0";
				this.teacherShow = this.insertUserData.identity === "1";
				this.adminShow = this.insertUserData.identity === "2";
			},

			// async insertUserInfo() {
			// 	console.log(9898)
			// 	console.log(this.insertUserData.identity)

			// 	try {
			// 		if (this.insertUserData.identity === "0") {
			// 			console.log(98981)

			// 			let response = await Own.insertStudentFun(this.insertUserData)
			// 			this.insertUserData = response.data

			// 		} else if (this.insertUserData.identity === "1") {
			// 			let response = await Own.insertTeacherFun(this.insertUserData)
			// 			this.insertUserData = response.data

			// 		} else if (this.insertUserData.identity === "2") {
			// 			let response = await Own.insertAdminFun(this.insertUserData)
			// 			this.insertUserData = response.data

			// 		}
			// 	} catch (error) {}

			// }

			async insertUserInfo() {
				console.log("开始插入用户信息...");
				console.log("当前身份:", this.insertUserData.identity);

				try {
					let response;
					// 判断身份并调用对应的插入方法
					if (this.insertUserData.identity === "0") {
						console.log("处理学生信息...");
						console.log(this.insertUserData)
						response = await Own.insertStudentFun(this.insertUserData);
					} else if (this.insertUserData.identity === "1") {
						console.log("处理老师信息...");
						response = await Own.insertTeacherFun(this.insertUserData);
					} else if (this.insertUserData.identity === "2") {
						console.log("处理管理员信息...");
						response = await Own.insertAdminFun(this.insertUserData);
					} else {
						throw new Error("无效的身份类型");
					}

					// 更新数据
					if (response && response.data) {
						this.insertUserData = response.data;
						alert("用户信息插入成功！"); // 使用弹窗提示成功
					} else {
						alert("新增用户信息失败，请检查！"); // 使用弹窗提示失败
					}
				} catch (error) {
					console.error("插入用户信息失败:", error);
				}
			},

		}
	}
</script>

<style>
	.background {
		height: 100vh;
		/* 使背景占满整个视口高度 */
		width: 100%;
		background: white;
		flex-direction: column;
		/* 使子元素垂直排列 */
		display: flex;
		align-items: center;
		/* 垂直居中 */

	}

	.first-container {
		width: 90%;
		height: 60%;
		border-radius: 10px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		/* 垂直排列子元素 */
		gap: 10px;
		/* 设置子元素之间的间距 */
		margin-top: 5px;
	}

	.first-container>view {
		margin-bottom: 10rpx;
		font-weight: bold;
		font-size: 14px;
	}

	.first-container>input {
		width: 85%;
		/* 输入框宽度占满容器 */
		height: 40px;
		/* 输入框高度 */
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 0 10px;
		/* 内边距 */
		font-size: 19px;
	}

	.button {
		border: 0;
		background-color: #409EFF;
		color: white;
		width: 180rpx;
		font-size: 14px;
		margin-top: -30px;
	}

	select {
		width: 90%;
		/* 输入框宽度占满容器 */
		height: 40px;
		/* 输入框高度 */
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 0 10px;
		/* 内边距 */
		font-size: 14px;
	}
</style>
